<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css"/>
<script type="text/javascript">
		window.onload = function () {


			//1.查找#bj节点
			var btn01 = document.getElementById("btn01");
			btn01.onclick = function () {
				var elementById = document.getElementById("bj");
				alert(elementById.innerHTML);
			}

			//2.查找所有li节点
			var btn02 = document.getElementById("btn02");
			btn02.onclick = function () {
				var allLi = document.getElementsByTagName("li");
				alert(allLi.length);
			}
			//3.查找name=gender的所有节点
			var btn03 = document.getElementById("btn03");
			btn03.onclick = function () {
				var gender = document.getElementsByName("gender");
				alert(gender.length);
			}
			//4.查找#city下所有li节点
			var btn04 = document.getElementById("btn04");
			btn04.onclick = function () {
				//1 获取id为city的节点
				//2 通过city节点.getElementsByTagName按标签名查子节点
				var elementsByTagName = document.getElementById("city").getElementsByTagName("li");
				alert(elementsByTagName.length);
			}


			//5.返回#city的所有子节点
			var btn05 = document.getElementById("btn05");
			btn05.onclick = function () {
				//1 获取id为city的节点
				//2 通过city获取所有子节点
				alert(document.getElementById("city").childNodes.length);
			}

			//6.返回#phone的第一个子节点
			var btn06 = document.getElementById("btn06");
			btn06.onclick = function () {
				// 查询id为phone的节点
				alert(document.getElementById("phone").firstChild.innerHTML);
			}

			//7.返回#bj的父节点
			var btn07 = document.getElementById("btn07");
			btn07.onclick = function () {
				alert(document.getElementById("bj").parentNode.innerHTML);
			}

			//8.返回#android的前一个兄弟节点
			var btn08 = document.getElementById("btn08");
			btn08.onclick = function () {
				// 获取id为android的节点
				// 通过android节点获取前面兄弟节点
				alert(document.getElementById("android").previousSibling.innerHTML);
			}
			//9.读取#username的value属性值
			var btn09 = document.getElementById("btn09");
			btn09.onclick = function () {
				alert(document.getElementById("username").value);
			}
			//10.设置#username的value属性值
			var btn10 = document.getElementById("btn10");
			btn10.onclick = function () {
				document.getElementById("username").value = "路浩学习编程好累。";
			}
			//11.返回#bj的文本值
			var btn11 = document.getElementById("btn11");
			btn11.onclick = function () {
				alert(document.getElementById("bj").innerHTML);
			}
		}
</script>
</head>
<body>
<div id="total">
	<div class="inner">
		<p>
			你喜欢哪个城市?
		</p>

		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>

		<br>
		<br>

		<p>
			你喜欢哪款单机游戏?
		</p>

		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>

		<br />
		<br />

		<p>
			你手机的操作系统是?
		</p>

		<ul id="phone">
			<li>IOS</li>
			<li id="android">Android</li>
			<li>Windows Phone</li>
		</ul>
	</div>

	<div class="inner">
		gender:
		<input type="radio" name="gender" value="male"/>
		Male
		<input type="radio" name="gender" value="female"/>
		Female
		<br>
		<br>
		name:
		<input type="text" name="name" id="username" value="abcde"/>
	</div>
</div>
<div id="btnList">
	<div><button id="btn01">查找#bj节点</button></div>
	<div><button id="btn02">查找所有li节点</button></div>
	<div><button id="btn03">查找name=gender的所有节点</button></div>
	<div><button id="btn04">查找#city下所有li节点</button></div>
	<div><button id="btn05">返回#city的所有子节点</button></div>
	<div><button id="btn06">返回#phone的第一个子节点</button></div>
	<div><button id="btn07">返回#bj的父节点</button></div>
	<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
	<div><button id="btn09">返回#username的value属性值</button></div>
	<div><button id="btn10">设置#username的value属性值</button></div>
	<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>